<script setup lang="ts">
/*
 select,传入api
 */
const attrs = useAttrs()
const emit = defineEmits(['update:modelValue'])
const props = withDefaults(defineProps<{
  modelValue: number | string | undefined | null,
  listApi: () => Promise<any[]>,
  labelKey?: string
  valueKey?: string,
  slotValues?: string[] // 展示的插槽内容属性
}>(), {
  labelKey: 'name',
  valueKey: 'id',
})
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const hasSlotValues = computed(() => {
  return props.slotValues && props.slotValues.length > 0;
})

let options: Ref<any[]> = ref([])

onBeforeMount(async () => {
  options.value = await props.listApi()
})
</script>

<template>
  <el-select
      clearable
      v-bind="attrs"
      v-model="value"
      style="width: 100%"
  >
    <el-option
        v-for="item in options"
        :key="item[labelKey]+item[props.valueKey]"
        :label="item[props.labelKey]"
        :value="item[props.valueKey]"
    >
      <template #default v-if="hasSlotValues">
        <span v-for="slotValue in props.slotValues" class="m-r-2">{{ item[slotValue] }}</span>
      </template>
    </el-option>
  </el-select>
</template>

<style scoped lang="scss">

</style>